<template>
  <div>
    <van-tabs v-model="active" style="margin-top: 2rem;" animated :border="false" color="#70cff4" title-active-color="#70cff4">
      <van-tab title="验证码进入" style=" font-size: .5rem; tabs-card-height: 3rem">
        <van-cell-group style="padding: 30px 30px">
          <van-field v-model="phoneNumber" label="" placeholder="请输入手机号">
            <template #button>
              <van-button size="small" plain @click="sendVerifyCode">发送验证码</van-button>
            </template>
          </van-field>
          <van-field v-model="verifyCode" label="" placeholder="请输入验证码" />
        </van-cell-group>
      </van-tab>
      <van-tab title="密码登录">
        <van-cell-group style="padding: 30px 30px">
          <van-field v-model="phoneNumber" label="" placeholder="请输入手机号"/>
          <van-field v-model="password" label="" placeholder="请输入密码" />
        </van-cell-group>
      </van-tab>
    </van-tabs>
    <van-button type="primary" style="width: 300px;"  color="#169bd5">登录</van-button>
    <div style="margin-top: 20px">
      <p>登录表示您同意<a href="https://222.baidu.com">用户协议</a>、<a href="https://www.baidu.com">隐私协议</a></p>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, Button, Field, Toast } from 'vant'
export default {
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Button.name]: Button,
    [Field.name]: Field,
    [Toast.name]: Toast
  },
  data () {
    return {
      active: 0,
      phoneNumber: '',
      password: '',
      verifyCode: ''
    }
  },
  beforeCreate () {
    document.title = '樟树人才服务平台'
  },
  methods: {
    sendVerifyCode () {
      // 发送验证码
      // 接口请求成功
      Toast('短信验证码已发出，请您注意查收')
    }
  }
}
</script>
<style scoped>
  a {
    color: #70cff4;
  }
  p {
    font-size: 20px;
  }
</style>
